<template>
  <div class="search-com w-full">
    <div class="flex_aic_jcsb w-full">
      <div class="flex_aic">
        <el-input
          v-model="filters.saleNo"
          :placeholder="$t('orderSearchCom.请输入')"
          style="width: 280px"
          class="ml12"
        >
          <template #prefix>
            <span class="color-555555">{{ $t('orderSearchCom.订单编号') }}</span>
          </template>
        </el-input>
        <el-input
          v-model="filters.vipNickName"
          :placeholder="$t('orderSearchCom.请输入')"
          style="width: 280px"
          class="ml12"
        >
          <template #prefix>
            <span class="color-555555">{{ $t('orderSearchCom.会员名称') }}</span>
          </template>
        </el-input>
        <el-date-picker
          v-model="filters.date"
          :placeholder="$t('orderSearchCom.请选择')"
          style="width: 280px"
          class="ml12"
          type="daterange"
          :range-separator="$t('orderSearchCom.至')"
          :start-placeholder="$t('orderSearchCom.下单开始日期')"
          :end-placeholder="$t('orderSearchCom.下单结束日期')"
        >
        </el-date-picker>

        <!-- <el-input
          v-model="filters.searchKey2"
          placeholder="商家名称/用户ID/手机号码"
          style="width: 280px"
          class="ml12"
        >
          <template #prefix>
            <span class="color-555555">商户关键词</span>
          </template>
        </el-input>
        <el-select
          v-model="filters.type"
          placeholder="请选择商品分类"
          class="ml12"
          style="width: 240px"
        >
          <template #prefix>
            <span class="color-555555">商品分类</span>
          </template>
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="filters.status"
          placeholder="请选择商品状态"
          class="ml12"
          style="width: 240px"
        >
          <template #prefix>
            <span class="color-555555">商品状态</span>
          </template>
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="filters.tranType"
          placeholder="请选择交易类型"
          class="ml12"
          style="width: 240px"
        >
          <template #prefix>
            <span class="color-555555">交易类型</span>
          </template>
          <el-option
            v-for="item in tranTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
      </div>
      <div class="flex_aic">
        <el-button @click="handleReset">{{ $t('orderSearchCom.重置') }}</el-button>
        <el-button type="primary" @click="handleSearch">{{ $t('orderSearchCom.查询') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const emit = defineEmits(["search"]);
const statusList = ref([
  { label: "即将到期", value: 1 },
  { label: "到期未缴纳", value: 2 },
  { label: "已缴纳", value: 3 },
]);
const typeList = ref([
  { label: "分类1", value: 1 },
  { label: "分类2", value: 2 },
  { label: "分类3", value: 3 },
  { label: "分类4", value: 4 },
]);
const tranTypeList = ref([
  { label: "零售", value: "1" },
  { label: "退货", value: "2" },
]);

const filters = ref({
//   searchKey1: "",
//   searchKey2: "",
//   type: "0",
//   status: "",
  tranType: "1",
  date: [],
  saleNo: "",
  vipNickName: "",
});

const handleSearch = () => {
  emit("search", filters.value);
};

const handleReset = () => {
  filters.value = {
    //   searchKey1: "",
    //   searchKey2: "",
    //   type: "0",
    //   status: "",
    tranType: "1",
    date: [],
    saleNo: "",
    vipNickName: "",
  };
  emit("search", filters.value);
};

defineExpose({
  filters,
});
</script>

<style lang="scss" scoped>
.search-com {
  width: 100%;
}
</style>
